<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height: 252px">
                    <div class="user-info">
                        <img src="../../../assets/img/admin_info.png" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ name }}</div>
                            <div style="font-size: 20px; font-weight: 600; color: red">{{ role }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        当前时间：<span style="font-size: 20px; font-weight: 500; color: black">{{ date | formatDate }}</span>
                    </div>
                    <div class="user-info-list">
                        当前登录地点：
                        <span style="font-size: 20px; font-weight: 500; color: black">{{ LocationCity }}</span>
                    </div>
                </el-card>

                <el-card shadow="hover">
                    <div style="text-align: center; font-weight: 600">在站快递详情统计</div>
                    <div id="main_left"></div>
                </el-card>
            </el-col>

            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ totalUsers }}</div>
                                    <div>用户统计</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-user grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ totalStaffs }}</div>
                                    <div>员工统计</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-document grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ totalExpress }}</div>
                                    <div>累计订单</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- 日历 -->
                <el-card shadow="hover" style="height: 722px">
                    <el-calendar v-model="value"> </el-calendar>
                </el-card>
            </el-col>
        </el-row>

        <el-card>
            <div style="text-align: center; font-weight: 600">近半年快递（出+入库）统计折线图</div>
            <div id="main"></div>
        </el-card>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import MapLoader from '../../../AMap.js';
var padDate = function (value) {
    // console.log(value);
    return value < 10 ? '0' + value : value;
};
export default {
    name: 'dashboard',
    data() {
        return {
            temp_array: [],
            unimported: [],
            imported: [],
            exported: [],
            refused: [],
            send: [],
            value: new Date(),
            totalStaffs: 0,
            totalUsers: 0,
            totalExpress: 0,
            LocationCity: '',
            date: new Date(),
            role: '管理员',
            name: localStorage.getItem('user_name')
        };
    },
    components: {
        Schart
    },

    created() {
        MapLoader().then(
            (AMap) => {
                AMap.plugin('AMap.CitySearch', () => {
                    const citysearch = new AMap.CitySearch(); // 自动获取用户IP，返回当前城市
                    citysearch.getLocalCity((status, result) => {
                        if (status === 'complete' && result.info === 'OK') {
                            if (result && result.city && result.bounds) {
                                this.LocationCity = result.city;
                                console.log('当前城市', this.LocationCity); // var citybounds = result.bounds; // 地图显示当前城市 // map.setBounds(citybounds);
                            }
                        } else {
                            console.log('定位出错');
                        }
                    });
                });
            },
            (err) => {
                console.log('地图加载失败', err);
            }
        );
        this.statistic_user_staff_express();
       this.statistic_express_total();
        this.statistic_express_half_year();
        console.log(this.refused);
    },

    methods: {
        statistic_express_half_year() {
            const _this = this;
            this.$axios({
                method: 'GET',
                url: 'chart/importNum'
            })
                .then(function (res) {
                    if (res.data) {
                        console.log(res.data);
                        _this.temp_array = res.data.series;
                       _this.temp_time = res.data.time;
                        _this.drawChart();
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        statistic_express_total() {
            const _this = this;
            this.$axios({
                method: 'GET',
                url: 'statistics/statistic_express_total'
            })
                .then(function (res) {
                    if (res.data.code == 1) {
                        _this.unimported = res.data.result[0];
                        _this.imported = res.data.result[1];
                        _this.exported = res.data.result[2];
                        _this.refused = res.data.result[3];
                        _this.send = res.data.result[4];
                        _this.drawChart2();
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        statistic_user_staff_express() {
            const _this = this;
            this.$axios({
                method: 'GET',
                url: 'statistics/statistic_user_staff_express'
            })
                .then(function (res) {
                    if (res.data.code == 1) {
                        _this.totalStaffs = res.data.totalStaffs;
                        _this.totalUsers = res.data.totalUsers;
                        _this.totalExpress = res.data.totalExpress;
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        drawChart() {
            let myEchart = this.$echarts.init(document.getElementById('main'));
            console.log(this.jd);
            let option = {
                title: {
                    text: '快递总数'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['京东快递', '顺丰快递', '圆通快递', '中通快递', '申通快递', '韵达快递', '天天快递', 'EMS'],
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'(水平) ¦ 'vertical'(垂直)
                    orient: 'horizontal'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.temp_time
                },
                yAxis: {
                    type: 'value'
                },
                series: this.temp_array
                // [
                //     {
                //         name: '京东快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.jd
                //     },
                //     {
                //         name: '顺丰快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.sf
                //     },
                //     {
                //         name: '圆通快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.yt
                //     },
                //     {
                //         name: '中通快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.zt
                //     },
                //     {
                //         name: '申通快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.st
                //     },
                //     {
                //         name: '韵达快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.yd
                //     },
                //     {
                //         name: '天天快递',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.tt
                //     },
                //     {
                //         name: 'EMS',
                //         type: 'line',
                //         // stack: '总量',
                //         data: this.ems
                //     }
                // ]
            };
            myEchart.setOption(option);
        },
        drawChart2() {
            console.log(this.refused);
            let myEchart = this.$echarts.init(document.getElementById('main_left'));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {
                    data: ['在库', '出库', '待入库', '寄件', '拒签']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['京东快递', '顺丰快递', '圆通快递', '中通快递', '申通快递', '韵达快递', '天天快递', 'EMS']
                },
                series: [
                    {
                        name: '在库',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.imported
                    },
                    {
                        name: '出库',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.exported
                    },
                    {
                        name: '待入库',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.unimported
                    },
                    {
                        name: '寄件',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.send
                    },
                    {
                        name: '拒签',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.refused
                    }
                ]
            };
            myEchart.setOption(option);
        }
    },
    filters: {
        formatDate: function (value) {
            var date = new Date(value);
            console.log(date.getDate());
            var year = date.getFullYear();
            var month = padDate(date.getMonth() + 1);
            var day = padDate(date.getDate());
            var hours = padDate(date.getHours());
            var minutes = padDate(date.getMinutes());
            var seconds = padDate(date.getSeconds());
            // 整理并返回
            return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes + ':' + seconds;
        }
    },
    mounted() {
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000);
    },
    beforeMount() {
        console.log(this.refused);
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
};
</script>


<style scoped>
#main {
    width: 95%;
    height: 650px;
    margin: auto;
    margin-top: 30px;
}
#main_left {
    width: 95%;
    height: 480px;
    margin: auto;
    margin-top: 30px;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
    font-weight: 500;
    color: black;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
